
<template>

  <el-button type="primary" @click="increase(props)">增加该科室挂号信息</el-button>
  <el-table :data="tableDataFromDB.slice((currentPage - 1) * pagesize, currentPage * pagesize)" height="630" border style="width: 100%">
    <el-table-column fixed prop="id" label="挂号序号" width="150" />
        <el-table-column prop="doctId" label="医生" width="120" />
    <el-table-column prop="seeDoctor" label="就诊状态" width="120" />
        <el-table-column prop="department" label="科室" width="120" />    
    <el-table-column prop="patientName" label="患者姓名" width="120" />    
     <el-table-column fixed="right" label="操作" width="200">
      <template #default="row">
        
        
        <!-- 编辑按钮 -->

        <el-button type="success" @click="handleClick(row)" style="">
          <el-icon><Edit /></el-icon>
        </el-button>
        <!-- 删除按钮 -->
        <!-- <el-popconfirm title="确定要删除该类号源吗?" @confirm="del(row)"> -->
          <!-- <template #reference>
            <el-button type="danger">
              <el-icon><DeleteFilled /></el-icon
            ></el-button>
          </template> -->
        <!-- </el-popconfirm> -->
      </template>

      
    </el-table-column>
  </el-table>
  <!-- 添加科室的窗体 -->
  <el-dialog v-model="dialogVisible_add" title="增加该科室挂号信息" width="30%">
    <el-form label-width="120px">
      
      <el-form-item label="医生">
        <!-- 绑定了info_add_dept变量，变量类型是对象，对象是有属性的 -->
        <el-input v-model="info_add.doctId" />
      </el-form-item>
      <el-form-item label="就诊状态">
        <el-input v-model="info_add.seeDoctor" />
      </el-form-item>
      <el-form-item label="科室">
        <el-input v-model="info_add.department" />
      </el-form-item>
      <el-form-item label="患者姓名">
        <el-input v-model="info_add.patientName" />
      </el-form-item>
      <el-form-item label="挂号序号">
        <el-input v-model="info_add.id" />
      </el-form-item>
    
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible_add = false">取消</el-button>

        <!-- 确认添加事件 @click=“insert”表示单击之后执行insert方法-->
        <el-button
          type="primary"
          @click="increase1()"
          v-model="dialogVisible_add"
          >确认添加</el-button
        >
      </span>
    </template>
  </el-dialog>
  <!-- 编辑对话框 -->
  <el-dialog v-model="dialogVisible" title="编辑就诊状态" width="30%">
    <el-form label-width="120px">
      <el-form-item label="是否诊毕">
        <el-input v-model="info_edit.seeDoctor" />
      </el-form-item>
    </el-form>
    
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="revise()" v-model="dialogVisible"
          >确认</el-button
        >
      </span>
    </template>
  </el-dialog>
  <el-pagination
        layout="total,sizes,prev,pager,next,jumper"
        :total="tableDataFromDB.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10,15,20]"
        :page-size="pagesize"/>

</template>


<script>
import { ElMessage } from 'element-plus'
import { get } from '@/utils/request'
//import { ElMessage } from 'element-plus/lib/components'
//用于网页初始化，网页启动时会自动执行该函数mounted()
//res:从该url地址返回的对象 真正的数据在res.data中，res.data是数组
//import { get } from '@/utils/request'
export default {
  data() {
    return {
      currentPage: 1, //默认页码为1
      pagesize: 5, //默认一页显示10条
      dialogVisible: false,
      dialogVisible_add: false, //添加科室窗体的可见性

      info_edit: {},
      info_add: {},
      tableDataFromDB: [] //空数组
    }
  },

  //挂载函数,网页启动时会自动执行该函数,用与网页初始化
  //res：从该url地址返回的数据
  mounted() {
    get('/getWaitSee').then((res) => {
      console.log(res)
      this.tableDataFromDB = res.data
      console.log(this.tableDataFromDB)
    }) 
  },
  methods: {
    handleSizeChange (size) {
      console.log(size,'size');
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange (currentPage) {
      console.log(currentPage,'currentPage');
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
},
    increase() {
      this.dialogVisible_add = !this.dialogVisible_add
    },
    //增加方法
    increase1() {
      this.dialogVisible_add = !this.dialogVisible_add
      //访问后端项目暴露出的接口addDoctorfee
      get('/addWaitSee', this.info_add).then((res) => {
        console.log(res.data)
        ElMessage({
          message: '添加科室成功',
          type: 'success'
        })
        //window.location.reload()
      })
    },

    //编辑方法
    handleClick(data) {
      this.info_edit = data.row //把数据放到info里边
      //打印info
      // console.log(this.info_edit)
      this.dialogVisible = !this.dialogVisible
    },
    //确认编辑方法
    //修改
    revise() {
      this.dialogVisible = !this.dialogVisible //马上消失
      
      get('/updateWaitSee', this.info_edit).then((res) => {
        ElMessage({
          message: '修改成功！',
          type: 'success'
        })
        //window.location.reload()
      })
    },

    //删除方法
    del(info_delete) {
      get('/deleteWaitSee', { feeId: info_delete.row.feeId }).then((res) => {
        ElMessage({
          message: '删除成功！',
          type: 'success'
        })
        window.location.reload()
      })
    }
  }
}
</script>
